<template>
	<view class="warp">
		<!-- 状态栏 -->
		<!-- #ifdef APP-PLUS -->
			<view class="status_bar">  
			    <view class="top_view"></view>  
			</view>
		<!-- #endif -->
		<!-- search -->
		<searchBox v-model="searchdata" @inputclear="searchdata = $event.clear" @confirm="confirm(searchdata)"></searchBox>
		<!-- 轮播图 -->
		<swiperBox :swiperList="swiperList"></swiperBox>
		<!-- 菜单按钮 -->
		<view class="menu_nav">
			<navigator v-for="(item, index) in menuNav" :key="index" :url="`/pages/form/${item.src}`" class="menu_icon" hover-class="none" :style="{'background': item.BgColor}">
				<text class="iconfont" :class="item.icon" ></text>
				<text class="menu_name">{{item.menuName}}</text>
			</navigator>
		</view>
		<!-- 创作达人 -->
		<view class="public">
			<titleBox :publictitle="gradetitle" @moreBtn="gradeMore"></titleBox>
			<scroll-view class="scrollView" scroll-x="true" scroll-left="0" >
				<navigator class="scrollBlock" v-for="(item , index) in gradeView" :key="index" :url="`/pages/mine/${item.url}`" hover-class="none">
					<image :src="item.path" :mode="item.mode">
					<view class="scroll_title">{{item.name}}</view>
					<view class="scroll_center"><text class="iconfont" :class="item.gradeIcon"></text>{{item.grade}}</view>
					<view class="scroll_footer">{{item.numbar}}</view>
				</navigator>
			</scroll-view>
		</view>
		<!-- banner -->
		<navigator v-for="(item, index) in bannerPath" :key="index" :url="`/pages/details/${item.url}`" class="banner" hover-class="none">
			<image :src="item.path" mode="scaleToFill"></image>
		</navigator>
		<!-- 精选笔记 -->
		<view class="public">
			<titleBox :publictitle="noteTitle"></titleBox>
			<noteBox :noteView="noteView" ></noteBox>
		</view>
		<!-- 热门问答 -->
		<view class="public">
			<titleBox :publictitle="QATitle"></titleBox>
			<noteBox :noteView="QAView" ></noteBox>
		</view>
	</view>
</template>
<script>
	import searchBox from '@/components/search/search.vue'
	import swiperBox from '@/components/swiperSub/index.vue'
	import titleBox from '@/components/headTitle/index.vue'
	import noteBox from '@/components/note/index.vue'
	export default {
		components: {
			searchBox,
			swiperBox,
			titleBox,
			noteBox
		},
		data() {
			return {
				searchdata: '',
				swiperList: [],
				menuNav: [],
				gradetitle:[],
				gradeView: [],
				bannerPath:[],
				noteTitle:[],
				noteView:[],
				QATitle:[],
				QAView:[]
			}
		},
		onLoad() {
			this.swiper();
			this.menu();
			this.scrolltitle();
			this.scrollTalent();
			this.banner();
			this.noteTitles();
			this.noteList();
			this.QATitles();
			this.QAList();
		},
		methods: {
			//swiper
			swiper() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/swiper','GET').then(res => {
					console.log('返回轮播图数据', res)// 打印调用成功回调
					this.swiperList = res.swipers;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			//菜单按钮
			menu() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/menu','GET').then(res => {
					console.log('返回菜单按钮数据', res)// 打印调用成功回调
					this.menuNav = res.menu;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			//创作达人
			gradeMore(e) {
				uni.navigateTo({
					url: "/pages/gradeList/index",
				});
			},
			scrolltitle() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/gradetitle','GET').then(res => {
					console.log('返回gradetitle数据', res)// 打印调用成功回调
					this.gradetitle = res.publicData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			scrollTalent() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/grade','GET').then(res => {
					console.log('返回gradeView数据', res)// 打印调用成功回调
					this.gradeView = res.scrollData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			//广告位
			banner() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/banner','GET').then(res => {
					console.log('返回banner数据', res)// 打印调用成功回调
					this.bannerPath = res.banner;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			//精选笔记
			noteTitles() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/noteTitle','GET').then(res => {
					console.log('返回noteTitle数据', res)// 打印调用成功回调
					this.noteTitle = res.publicData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			noteList() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/note','GET').then(res => {
					console.log('返回noteView数据', res)// 打印调用成功回调
					this.noteView = res.noteData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			//热门问答
			QATitles() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/QAtitle','GET').then(res => {
					console.log('返回QATitle数据', res)// 打印调用成功回调
					this.QATitle = res.publicData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
			QAList() {
				this.$request('mock/93c1b8865170438476e406a41e3fdf37/studynotes/QA','GET').then(res => {
					console.log('返回QAView数据', res)// 打印调用成功回调
					this.QAView = res.qaData;
				}).catch(err => {
					console.log('请求失败')
				})
			},
		}
	}
</script>
<style lang="scss">
@import "../../icon/iconfont.css";

page{
	/* height: 100vh; */
	.menu_nav {
		background-color: $uni-bg-color;
		border-radius: $uni-border-radius-lg;
		text-align: center;
		display: flex;
		justify-content:space-around;
		align-items:center;
		margin: $uni-spacing-row-lg 0;
		padding: 4% 2%;
		.menu_icon {
			width: 45%;
			margin: 0 auto;
			padding: $uni-spacing-row-sy 0;
			border-radius: $uni-border-radius-lg;
			position: relative;
			.iconfont {
				font-size: $uni-img-size-six;
				padding-right: $uni-border-radius-lg;
				color: $uni-text-color-inverse;
				border-radius: $uni-border-radius-ty;
				position: relative;
				margin:0 auto
			}
			&::after {
				position: absolute;
				content: '';
				background-image: url('https://image.weilanwl.com/color2.0/cardBg.png');
				background-size: 100%;
				background-position: center;
				width: 100%;
				height: 100%;
				right: 0;
				bottom: 0;
				pointer-events:none
			}
			.menu_name {
				font-size: $uni-font-size-lg;
				color: $uni-bg-color;
				letter-spacing: $uni-spacing-col-sa;
			}
		}
	}
	.scrollView{
		width: 100%;
		white-space: nowrap;
		.scrollBlock{
			display:inline-block;
			height: 100%;
			width: 180rpx;
			margin-right: 40rpx;
			position: relative;
			letter-spacing: $uni-spacing-row-one;
			.scroll_title{
				font-size: $uni-font-size-six;
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
			}
			image{
				width: 180rpx;
				height: 180rpx;
				border-radius: $uni-spacing-row-base;
			}
			&:last-child{
				margin-right:0rpx;
			}
		}
	}	
}
</style>
